import React from'react';
import './qjx_tui.css';
import { useNavigate } from "react-router-dom";
import { RightOutline,LeftOutline } from 'antd-mobile-icons'
const refundData = [
  {
    serviceNumber: '57625133057',
    date: '2020-03-21',
    product: '乐心手环5S',
    subProduct: '乐心手环5S 标准版',
    refundStatus: '退款中',
    detailButtonText: '查看详情'
  },
  {
    serviceNumber: '57625133057',
    date: '2020-03-21',
    product: '乐心手环5S',
    subProduct: '乐心手环5S 标准版',
    refundStatus: '退款成功',
    detailButtonText: '查看详情'
  },
  {
    serviceNumber: '57625133057',
    date: '2020-03-21',
    product: '乐心手环5S',
    subProduct: '乐心手环5S 标准版',
    refundStatus: '退款中',
    detailButtonText: '查看详情'
  },
  {
    serviceNumber: '57625133057',
    date: '2020-03-21',
    product: '乐心手环5S',
    subProduct: '乐心手环5S 标准版',
    refundStatus: '退款成功',
    detailButtonText: '查看详情'
  },
  {
    serviceNumber: '57625133057',
    date: '2020-03-21',
    product: '乐心手环5S',
    subProduct: '乐心手环5S 标准版',
    refundStatus: '退款中',
    detailButtonText: '查看详情'
  },
  {
    serviceNumber: '57625133057',
    date: '2020-03-21',
    product: '乐心手环5S',
    subProduct: '乐心手环5S 标准版',
    refundStatus: '退款成功',
    detailButtonText: '查看详情'
  }
];
const App = () => {
  const navigate = useNavigate();
  return (
    <div className="hsl_refund_wrapper">
      <div className="qq_header">
      <p style={{
                    marginTop: '5px'
                }} onClick={() => navigate('/home/mind')}><LeftOutline fontSize={24} /></p>
                <h2>退款售后</h2>
                <span className="qq_add-icon" onClick={() => navigate('/qjx_gz')}>规则</span>
            </div>
      {refundData.map((item, index) => (
        <div key={index} className="hsl_refund_item">
          <div className="hsl_product_info">
            <img src="123.png" alt="乐心手环5S" className="hsl_product_img" />
            <div className="hsl_product_text">
              <p>{item.product}</p>
              <p>{item.subProduct}</p>
            </div>
          </div>
          <div className="hsl_refund_info">
            <div className="hsl_left_info">
              <p>服务编号：{item.serviceNumber}</p>
              <p>{item.date}</p>
            </div>
            <div className="hsl_right_info">
              <p>仅退款 {item.refundStatus}</p>
              <button className="hsl_detail_button">{item.detailButtonText}</button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default App;